<template>
  <view class="pages">
    <u-sticky class="sticky_c" bgColor="#F6F2FB" :offset-top="0">
      <h-line :height="statusHeight"></h-line>
      <view class="navbar">
        <view class="nav_b">
          <u-icon name="arrow-left" size="22" color="#333" @click="goBack"></u-icon>
        </view>
        <view class="page_title">产检表</view>
        <view v-if="isshow" class="nav_right">
          <u-icon name="share-square" size="24" color="#333" @click="toShare"></u-icon>
        </view>
      </view>
    </u-sticky>
    <!-- <h-nav-bar-yun
      title="产检表"
      :fixed="true"
      backgroundColor="#F6F2FB"
      @clickLeft="goBack"
      rightIconF="share-square"
      @clickRight="toShare"
    ></h-nav-bar-yun> -->
    <view class="detail_title_top">
      <image src="@/static/imgs/image_girl.png" mode="scaleToFill" />
      <view class="complete_state" v-if="antenatalDetail.status == 1">
        <u-icon name="checkmark-circle-fill" size="22" color="#fff"></u-icon>
        <text>已完成</text>
      </view>
      <view v-else class="complete_state">
        <view class="quan"></view>
        <text>待完成</text>
      </view>
    </view>
    <view class="detail_title_box">
      <view class="antenatal_title">
        <view>
          <text class="antenatal_num">{{ antenatalDetail.name }}</text>
          <view class="antenatal_main">
            <view>必查项目：</view>
            <view v-if="antenatalDetail.type == 0" class="antenatal_main_item">
              <text v-for="(i, n) in antenatalDetail.bcxm_cate" :key="n">{{ i }}</text>
            </view>
            <view class="antenatal_main_item" v-if="antenatalDetail.type == 1">
              <text v-for="(i, n) in antenatalDetail.user_cate" :key="n">{{ i }}</text>
            </view>
          </view>
        </view>
      </view>
      <view class="time_select">
        <text>{{ antenatalDetail.check_date || revealVal }}</text>
        <text class="weeks">{{ antenatalDetail.week_day || weeksValue }}</text>
        <u-icon name="arrow-down" size="10" color="#999999" v-if="isshow"></u-icon>
      </view>
      <view class="btn_box" v-if="isshow">
        <u-button
          type="primary"
          shape="circle"
          text="产检记录"
          color="#CBBEFE"
          @click="toRecordTest"
          class="custom-style"
        ></u-button>
        <u-button
          type="primary"
          shape="circle"
          text="上传报告单"
          color="#CBBEFE"
          @click="toUpload"
          class="custom-style"
        ></u-button>
      </view>
      <view v-if="antenatalDetail.type == 1" class="completed add_new">新增</view>
    </view>
    <view class="nav_boxa" :style="{ top: statusHeight + 100 + 'rpx' }">
      <view style="">
        <u-tabs
          :list="tabs"
          lineColor="#6E43FF"
          lineWidth="0rpx"
          :scrollable="false"
          :inactiveStyle="{ color: '#999999', 'font-size': '26rpx' }"
          :activeStyle="{ color: '#000000', 'font-size': '26rpx', 'font-weight': '600' }"
          itemStyle="height:70rpx; padding:0; flex:none;"
          @click="handleStatusTabs"
        ></u-tabs>
      </view>
    </view>
    <view class="check_item">
      <!-- 系统创建 -->
      <view v-if="antenatalDetail.type == 0">
        <view class="inspect_list" id="section0">
          <view class="inspect_list_title">
            <view class="title_icon"></view>
            <text>必查项目</text>
          </view>
          <view class="inspect_content">
            <view v-if="antenatalDetail?.bcxm_cate?.length > 0">
              <view class="content_item" v-for="(i, n) in antenatalDetail?.bcxm_cate" :key="n">
                <text>{{ n + 1 }}.</text>
                <view class="content_item_info">{{ i }}</view>
              </view>
            </view>
            <view v-else class="content_item">暂无</view>
          </view>
        </view>
        <view class="inspect_list" id="section1">
          <view class="inspect_list_title">
            <view class="title_icon"></view>
            <text>常规保健内容</text>
          </view>
          <view class="inspect_content">
            <view v-if="antenatalDetail?.cgbj_cate?.length > 0">
              <view class="content_item" v-for="(i, n) in antenatalDetail?.cgbj_cate" :key="n">
                <text>{{ n + 1 }}.</text>
                <view class="content_item_info">{{ i }}</view>
              </view>
            </view>
            <view v-else class="content_item">暂无</view>
          </view>
        </view>
        <view class="inspect_list" id="section2">
          <view class="inspect_list_title">
            <view class="title_icon"></view>
            <text>备查项目</text>
          </view>
          <view class="inspect_content">
            <view v-if="antenatalDetail?.bc_cate?.length > 0">
              <view class="content_item" v-for="(i, n) in antenatalDetail?.bc_cate" :key="n">
                <text>{{ n + 1 }}.</text>
                <view class="content_item_info">{{ i }}</view>
              </view>
            </view>
            <view v-else class="content_item">暂无</view>
          </view>
        </view>
        <view class="inspect_list" id="section3">
          <view class="inspect_list_title">
            <view class="title_icon"></view>
            <text>健康教育指导</text>
          </view>
          <view class="inspect_content">
            <view v-if="antenatalDetail?.jkzd_cate?.length > 0">
              <view class="content_item" v-for="(i, n) in antenatalDetail?.jkzd_cate" :key="n">
                <text>{{ n + 1 }}.</text>
                <view class="content_item_info">{{ i }}</view>
              </view>
            </view>
            <view v-else class="content_item">暂无</view>
          </view>
        </view>
      </view>
      <!-- 自己增加 -->
      <view v-else>
        <view class="inspect_list" id="section0">
          <view class="inspect_list_title">
            <view class="title_icon"></view>
            <text>必查项目</text>
          </view>
          <view class="inspect_content">
            <view v-if="antenatalDetail?.user_cate?.length > 0">
              <view class="content_item" v-for="(i, n) in antenatalDetail?.user_cate" :key="n">
                <text>{{ n + 1 }}.</text>
                <view class="content_item_info">{{ i }}</view>
              </view>
            </view>
            <view v-else class="content_item">暂无</view>
          </view>
        </view>
        <view class="inspect_list" id="section1">
          <view class="inspect_list_title">
            <view class="title_icon"></view>
            <text>常规保健内容</text>
          </view>
          <view class="inspect_content">
            <view v-if="antenatalDetail?.cgbj_cate?.length > 0">
              <view class="content_item" v-for="(i, n) in antenatalDetail?.cgbj_cate" :key="n">
                <text>{{ n + 1 }}.</text>
                <view class="content_item_info">{{ i }}</view>
              </view>
            </view>
            <view v-else class="content_item">暂无</view>
          </view>
        </view>
        <view class="inspect_list" id="section2">
          <view class="inspect_list_title">
            <view class="title_icon"></view>
            <text>健康教育指导</text>
          </view>
          <view class="inspect_content">
            <view v-if="antenatalDetail?.jkzd_cate?.length > 0">
              <view class="content_item" v-for="(i, n) in antenatalDetail?.jkzd_cate" :key="n">
                <text>{{ n + 1 }}.</text>
                <view class="content_item_info">{{ i }}</view>
              </view>
            </view>
            <view v-else class="content_item">暂无</view>
          </view>
        </view>
      </view>
    </view>
    <!-- 时间选择 -->
    <u-datetime-picker
      :formatter="formatter"
      title="请选取实际产检日期"
      :show="showDatePicker"
      v-model="newDate"
      mode="datetime"
      :maxDate="1786778555000"
      @close="showDatePicker = false"
      @cancel="showDatePicker = false"
      :closeOnClickOverlay="true"
      @confirm="onDateConfirm"
    ></u-datetime-picker>
    <!-- 分享 -->
    <!-- <h-share ref="shareRef" :showLh="false"></h-share> -->
    <u-popup
      :show="shareRef"
      mode="bottom"
      @close="close"
      :round="10"
      :closeable="true"
      bgColor="#F6F6F6"
    >
      <view class="content_c">
        <view class="fen_box_title">分享至</view>
        <view class="fen_box">
          <view class="fen_box_cen">
            <button open-type="share" class="fen_box_cen_l" @click="toppicWxShare">
              <image
                src="https://ossresource.miyingbl.com/uploads/20240307/1b8d3a17f569740d545b17facde7d718.png"
                class="fen_box_cen_l_img"
              ></image>
              <view class="fen_box_cen_l_te">微信好友</view>
            </button>
            <!-- <button open-type="share" class="fen_box_cen_l" @click="toppicPyShare">
              <image
                :src="doctorInfo?.avatar || 'https://ossresource.miyingbl.com/uploads/20231230/h-bl-app/1703899956674'"
                class="fen_box_cen_l_img"
              ></image>
              <view class="fen_box_cen_l_te">张医生</view>
            </button> -->
          </view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script setup lang="ts">
import { ref, nextTick } from 'vue'
import { useMemberStore, useSystemStore } from '@/stores'
import { navigateBack, navigateTo, formatDate, showToast } from '@/utils'
import { onLoad, onPageScroll, onShow } from '@dcloudio/uni-app'
import { getAntenatalDetail, editCheckDate } from '@/api/pregnancy/index'
const statusHeight = ref()
const userStore = useMemberStore()
const navBarTop = ref(0)
const addType = ref(0)
const tabs = ref([
  { name: '必查项目', values: 0 },
  { name: '常规保健内容', values: 1 },
  { name: '备查项目', values: 2 },
  { name: '健康教育指导', values: 3 },
])
const antenatalDetail = ref({})
const showDatePicker = ref(false)
const formatter = (type, value) => {
  if (type === 'year') {
    return `${value}年`
  }
  if (type === 'month') {
    return `${value}月`
  }
  if (type === 'day') {
    return `${value}日`
  }
  return value
}
//设置时间参数
const datePreams = ref({
  id: 0,
  date: '',
})
//周几
const newDate = ref(Date.now())
const maxDate = ref(Date.now())
//展示时间
const revealVal = ref('')
const weeksValue = ref('')
const login = ref()
//分享
const shareRef = ref(null)
//医生
const doctorInfo = ref([])
const preams = ref({
  id: 0,
  type: 0,
})
//
const info = ref({
  // 传路径 + 参数  不传默认首页
  // pages/index/index?id=....
  path: 'pages/index/index',
  // 分享图片 + 参数  不传默认logo图
  imageUrl:
    'https://ossresource.miyingbl.com/uploads/20240407/01ee3354aaba5358383f38331eec8fec.png',
  // 分享标题 + 参数  不传默认‘咪婴伴侣’
  title: '咪婴伴侣',
  // 分享简介 + 参数  不传默认‘咪婴伴侣’
  summary: '咪婴伴侣',
})
const isshow = ref(true)
const propsuid = ref()
onLoad((options) => {
  propsuid.value = options?.uid
  preams.value.id = options?.id
  datePreams.value.id = options?.id
  preams.value.type = options?.type
  if (options?.isshow == 'false') {
    isshow.value = false
  }
  uni.$on('myEvent', (data) => {
    if (data) {
      doctorInfo.value = data[0]
    }
  })
})
onShow(() => {
  uni.getSystemInfo({
    success: (e) => {
      statusHeight.value = e?.statusBarHeight * 2
    },
  })
  getAntenatal()
})
//获取详情
async function getAntenatal() {
  const res = await getAntenatalDetail({ uid: propsuid.value, ...preams.value })
  if (res.code == 200) {
    antenatalDetail.value = res.data.data[0]
    addType.value = res.data.data[0].type
    if (addType.value == 1) {
      tabs.value = [
        { name: '必查项目', values: 0 },
        { name: '常规保健内容', values: 1 },
        { name: '健康教育指导', values: 2 },
      ]
    }
  }
}
// 打开分享
function toShare() {
  openShare()
}
const path = ref('pages/index/index')
function openShare(row) {
  console.log(row)
  //获取当前页面栈的实例
  let pages = getCurrentPages()
  //获取当前页面
  let currentPage = pages[pages.length - 1]
  let url = currentPage.route
  //如果当前处于首页，则...
  info.value = row
  if (row?.path) {
    path.value = row.path
  } else {
    path.value = url
  }
  if (row?.imageUrl) {
    imageUrl.value = row.imageUrl
  }

  shareRef.value = true
}
const imageUrl = ref(
  'https://ossresource.miyingbl.com/uploads/20240407/01ee3354aaba5358383f38331eec8fec.png',
)
function close() {
  shareRef.value = false
}
// 分享
function toppicWxShare() {
  console.log(path.value)
  /* #ifdef H5 */
  uni.showToast({
    icon: 'error',
    title: '暂不支持分享',
  })

  shareRef.value = false
  /* #endif */
  /* #ifdef APP-PLUS */
  uni.share({
    provider: 'weixin',
    type: 0,
    scene: 'WXSceneSession',
    href: `https://a.app.qq.com/o/simple.jsp?pkgname=com.miyingbl.mybl&android_schema=mybl://${path.value}&ios_schema=mybl://${path.value}`,
    title: info.value?.title || '',
    summary: info.value?.title || '咪婴伴侣',
    imageUrl: imageUrl.value,
    success: function (res) {
      uni.showToast({
        title: '分享成功',
        icon: 'success',
      })
      uni.hideLoading()
      shareRef.value = false
    },
    fail: function (err) {
      console.log('分享失败', err)
      uni.showToast({
        title: '分享失败',
        icon: 'none',
        duration: 2000,
      })
      uni.hideLoading()
      shareRef.value = false
    },
  })
  /* #endif */
}
//到指定
function handleStatusTabs(e) {
  nextTick(() => {
    uni.pageScrollTo({
      selector: `#section${e.values}`,
      duration: 300,
    })
  })
}
//跳转产检记录
function toRecordTest() {
  navigateTo('/pregnancys/index/time-table/record-test')
}
//上传报告单
function toUpload() {
  navigateTo(`/pregnancys/index/time-table/upload-report?id=${preams.value.id}&type=2`)
}
function toCheckReport() {
  if (!isshow.value) return
  showDatePicker.value = true
}
//时间选择
async function onDateConfirm(e) {
  const weekselect = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
  showDatePicker.value = false
  newDate.value = e.value
  revealVal.value = formatDate(e.value, 'YYYY-MM-DD')
  let week = new Date(revealVal.value).getDay()
  weeksValue.value = weekselect[week]
  datePreams.value.date = `${revealVal.value} ${weeksValue.value}`
  const res = await editCheckDate({ uid: propsuid.value, ...datePreams.value })
  if (res.code == 200) {
    showToast(res.msg)
  }
}
// 返回
function goBack() {
  uni.navigateBack()
}
</script>

<style lang="scss" scoped>
.pages {
  width: 750rpx;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #f6f6f6;
  font-family: PingFang-SC-Bold, PingFang-SC;
  padding-bottom: 30rpx;
  .detail_title_top {
    width: 702rpx;
    height: 140rpx;
    background: #cbbefe;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    display: flex;
    justify-content: space-between;
    padding: 8rpx 30rpx;
    margin-top: 30rpx;
    image {
      width: 63rpx;
      height: 122rpx;
      margin-top: -36rpx;
    }
    .complete_state {
      display: flex;
      align-items: center;
      height: 40rpx;
      text {
        font-weight: 600;
        font-size: 22rpx;
        color: #ffffff;
        margin-left: 10rpx;
      }
      .quan {
        width: 33rpx;
        height: 33rpx;
        border-radius: 50%;
        border: 3rpx solid #724eff;
        opacity: 0.47;
      }
    }
  }
  .detail_title_box {
    width: 702rpx;
    background: #ffffff;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    margin-top: -86rpx;
    z-index: 10;
    margin-bottom: 20rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    padding-bottom: 30rpx;
    .antenatal_title {
      width: 645rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1rpx solid #f6f6f6;
      margin-top: 40rpx;
      .antenatal_num {
        font-weight: 600;
        font-size: 32rpx;
        color: #333333;
      }
      .antenatal_main {
        display: flex;
        font-size: 26rpx;
        color: #333333;
        margin: 20rpx 0;
        .antenatal_main_item {
          width: 500rpx;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 1;
          overflow: hidden;
          text-overflow: ellipsis;
          text {
            margin-right: 10rpx;
          }
        }
      }
    }
    .time_select {
      width: 645rpx;
      display: flex;
      align-items: center;
      font-size: 22rpx;
      color: #848484;
      margin-top: 16rpx;
      .weeks {
        margin: 0 10rpx 0 20rpx;
      }
    }
    .btn_box {
      width: 645rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 26rpx;
      .custom-style {
        width: 280rpx;
        height: 49rpx;
        background: #cbbefe;
        border-radius: 130rpx 130rpx 130rpx 130rpx;
        font-weight: 600;
        font-size: 22rpx;
        color: #ffffff;
      }
    }
    .completed {
      width: 101rpx;
      height: 39rpx;
      background: #ff8d9d;
      border-radius: 0rpx 16rpx 0rpx 16rpx;
      font-size: 22rpx;
      color: #ffffff;
      text-align: center;
      line-height: 39rpx;
      position: absolute;
      top: 0;
      right: 0;
    }
  }
  .check_item {
    width: 750rpx;
    min-height: 50vh;
    background: #ffffff;
    padding-top: 20rpx;
    .inspect_list {
      width: 663rpx;
      margin: 0 auto;
      margin-bottom: 30rpx;
      .inspect_list_title {
        display: flex;
        align-items: center;

        .title_icon {
          width: 16rpx;
          height: 30rpx;
          background: #8363ff;
          border-radius: 10rpx;
          margin-right: 10rpx;
        }
        text {
          font-size: 26rpx;
          color: #000000;
        }
      }
      .inspect_content {
        width: 663rpx;
        background: #f6f6f6;
        border-radius: 10rpx 10rpx 10rpx 10rpx;
        margin-top: 20rpx;
        padding: 20rpx;
        .content_item {
          font-size: 24rpx;
          color: #000000;
          margin: 6rpx 0;
          display: flex;
          align-items: center;
          text {
            margin-right: 18rpx;
          }
        }
      }
    }
  }
}
.sticky_c {
  top: 0 !important;
  background: '#fff';
  background-size: 100%;
  .navbar {
    padding: 0 24rpx;
    width: 100vw;
    height: 100rpx;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    box-sizing: border-box;
    .page_title {
      font-family: PingFang SC, PingFang SC;
      font-weight: 600;
      font-size: 36rpx;
      color: #333333;
      margin-right: 30rpx;
      line-height: 100rpx;
      text-align: center;
      flex: 1;
    }
    .nav_b {
      width: 100rpx;
      height: 32rpx;
      padding: 30rpx 0;
    }
    .nav_right {
      display: flex;
      align-items: center;
      .right_item {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-left: 20rpx;
        image {
          width: 30rpx;
          height: 30rpx;
          margin-bottom: 4rpx;
        }
        text {
          font-size: 16rpx;
          color: #000000;
        }
      }
    }
  }
  .round_edge {
    width: 750rpx;
    height: 40rpx;
    background: #f6f6f6;
    border-radius: 25rpx 25rpx 0rpx 0rpx;
  }
}
.content_c {
  width: 100%;
  border-radius: 16rpx 16rpx 0 0;
  background-color: #f6f6f6;
  // padding-bottom: 60rpx;

  .fen_box_title {
    text-align: center;
    font-size: 32rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    color: #333333;
    line-height: 90rpx;
    height: 90rpx;
  }

  .fen_box {
    width: 100%;
    border-radius: 10rpx 10rpx 0 0;
    padding: 0 24rpx 24rpx;

    .fen_box_cen {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
      padding-top: 20rpx;

      .fen_box_cen_l {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        width: 150rpx;
        margin: 0;
        line-height: 1;
        background-color: transparent;

        .fen_box_cen_l_img {
          width: 100rpx !important;
          height: 100rpx !important;
          border-radius: 50%;
        }

        .fen_box_cen_l_te {
          font-size: 28rpx;
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          color: #333333;
          line-height: 80rpx;
        }
      }
    }
  }
}
.nav_boxa {
  width: 750rpx;
  background: #fff;
  position: sticky;
  left: 24rpx;
  z-index: 999;
  border-radius: 25rpx 25rpx 0rpx 0rpx;
}
</style>
